<template>
  <div :class="['connector-app', nodeConfig.isStart ? null : 'connector-app-execute']" @click="open">
    <div class="header" @click="open">
      {{ $t('common.connector.trigger.executeApp') }}
      <i class="iconfont icon-fdn-guanlianbiaodan" />
    </div>
    <div class="app-info" v-if="app.data.bizTypeId">
      <div class="appLogo">
        <template v-if="app.data.logo && app.data.logo.startsWith('http')">
          <img :src="app.data.logo">
        </template>
        <i v-else :class="['iconfont', app.data.logo]" />
      </div>
      <span>{{app.data.name}}</span>
      <i class="iconfont icon-right1" />
    </div>
    <div class="app-info-empty" v-else>
      {{ $t('common.connector.selectApp') }}
      <i class="iconfont icon-right1" />
    </div>
  </div>
</template>
<script>

export default {
  name:'action-app',
  props:{
    nodeConfig:{
      type:Object,
      default:()=>({})
    },
    moduleList:{
      type:Array,
      default:()=>([])
    },
    parent:{
      type:Object,
      default:()=>({})
    }
  },
  watch:{
    nodeConfig:{
      handler(newVal){
        this.app = newVal
      },
      deep:true,
      immediate:true
    },
    parentApp:{
      handler(newVal) {
        if(this.app.isEdit){
          this.app.isEdit = false
        }
        this.$emit('update:nodeConfig', this.app)
      },
      deep: true,
      immediate: true
    }
  },
  computed:{
    parentApp() {
      return this.parent.getParent().isTrigger
        ? this.parent.getParent().getParent().data
        : this.parent.getParent().data;
    },
  },
  data(){
    return {
      app:this.nodeConfig,
    }
  },
  methods:{
    open(){
      this.$emit('open')
    },
  }
}

</script>